<?php use Gtf\Router; ?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8" />
  <title>Project Gtf</title>
  <link rel="stylesheet" href="<?=Router::res('css/bootstrap.min.css')?>" />
  <link rel="stylesheet" href="<?=Router::res('css/grid.css')?>" />
  <link rel="stylesheet" href="<?=Router::res('css/task.css')?>" />
  <script type="text/javascript" src="<?=Router::res('js/jquery.min.js')?>"></script>
</head>
<body class="container">
  <div class="header">
    <h1>My Task List</h1>
  </div>
  <div class="task-main">
    <div class="task-area">
      <div class="grid-layout task-list">
      <?php $this->block('tasks-list'); ?>
        <?php if (array_key_exists('tasks-list', $var)): ?>
          <?php foreach ($var['tasks-list'] as $row): ?>
          <div class="box2">
            <div class="inner">
              <div class="title">
                <a class="edit-btn" href="index.php/editTask?id=<?=$row['task_id']?>">
                  <i class="icon-edit"></i>
                </a>
                <h2 data-editor="text"><?=$row['title']?></h2>
              </div>
              <div class="content">
                <div class="row-fluid attr">
                  <div class="span6 date"><?=$row['mod_date']?></div>
                  <div class="span6">
                    <div class="progress progress-info">
                      <div class="bar" style="width:<?=$row['progress']?>%" data-editor="text">
                        <?=$row['progress']?>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="description" data-editor="textarea">
                  <?=$row['description']?>
                </p>
              </div>
            </div>
          </div>
          <?php endforeach; ?>
        <?php else: ?>
          <p>No task yet~</p>
        <?php endif; ?>
      <?php $this->end(); ?>
      </div>
    </div>
    <div class="sidebar">
      <div class="box">
        <?=CalendarTable::instance(array('today'=>'index.php?date=%y-%m-%d')) ?>
      </div>
      <div class="box">
        <a href="index.php/addTask" class="title">Add a task</a>
        <div class="more">
          <form action="index.php/addTask" method="POST">
            <p>
              <input type="text" name="title" placeholder="title" />
            </p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <input type="submit" class="btn btn-primary" value="Submit" />
            <input type="reset" class="btn" />
          </form>
        </div>
      </div>
    </div>
  </div>
  <div id="alert" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="alert-info" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="alert-info">Tittle</h3>
    </div>
    <div class="modal-body">
      <p>Message</p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
  <script type="text/javascript" src="<?=Router::res('js/bootstrap.min.js')?>"></script>
  <script type="text/javascript" src="<?=Router::res('js/jquery.editor.js')?>"></script>
  <script type="text/javascript" src="<?=Router::res('js/index.js')?>"></script>
</body>
</html>
